<template>
	<view style="background-color: #F5F6FA">
		<view class="header-view">
			<view class="count-view">{{pointData.nowPoint}}<span class="points">积分</span></view>
		</view>
		<view class="main-view">
			<view class="main-content">
				<view class="top-view">
					<view class="top-item right-border">
						<view class="title">积分获取</view>
						<view class="value">+{{pointData.addPoint}}</view>
					</view>
					<view class="top-item">
						<view class="title">积分支出</view>
						<view class="value">-{{pointData.reducePoint}}</view>
					</view>
				</view>
				<view class="list-view">
					<view class="list-item" v-for="(item, i) in dataList" :key="i">
						<view>
							<view classs="name">健步走活动奖励积分</view>
							<view class="time">{{item.createTime}}</view>
						</view>
						<view class="points">{{item.whetherAdd == 0?'-':'+'}}{{item.points}}</view>
					</view>
					<up-loadmore :status="status" />
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import {userApi} from '@/api/user/user-api.js'
	import { countTotalPage } from '@/utils/util'
	
	export default {
		data() {
			return {
				pageRequest:{
					page:1,
					limit:10,
				},
				totalPage: 0,
				status: 'loadmore',
				dataList: [],
				pointData: {}
			}
		},
		onLoad() {
			this.getDataList();
			
		},
		onReachBottom() {
			if (this.pageRequest.page < this.totalPage) {
				this.pageRequest.page ++
				this.status = 'loading';
				this.getDataList()
			} else {
				this.status = 'noMore';
			}
		},
		methods: {
			async getDataList(){
				const result = await userApi.userPointList(this.pageRequest);
				const point = await userApi.userPointTotal()
			
				this.pointData = point.data
				if(result.data.list.length > 0){
					if (this.pageRequest.page === 1) {
						this.dataList = result.data.list
						this.status = 'noMore';
					} else {
						this.dataList = this.dataList.concat(result.data.list);
					}
					this.totalPage = countTotalPage(result.data.total)
			
				}else {
					uni.showToast({
					  title: '没有更多数据了',
					  icon: 'none',
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header-view {
		width: 100%;
		height: 314rpx;
		background-color: #d81e06;
		border: none;
		border-radius: 80rpx;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		position: relative;
		.count-view {
			padding-top: 80rpx;
			text-align: center;
			font-size: 50rpx;
			font-weight: 700;
			color: #fff;
			.points {
				display: inline-block;
				font-size: 24rpx;
				margin-left: 5rpx;
			}
		}
	}
	.main-view {
		position: absolute;
		top: 100px;
		left: 30rpx;
		right: 30rpx;
		
		.main-content {
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 30rpx;
		}
		.top-view {
			display: flex;
			align-items: center;
			.top-item {
				flex: 1;
				text-align: center;
				.title {
					font-size: 28rpx;
					margin-bottom: 6rpx;
				}
				.value {
					font-size: 40rpx;
				}
			}
			.right-border {
				border-right: 1px solid #f5f5f5;
			}
		}
		.list-view {
			margin-top: 50rpx;
			.list-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #E4E4E4;
				padding: 30rpx 0;
				.name {
					font-size: 28rpx;
					margin-botton: 8rpx;
				}
				.time {
					color: #999999;
					font-size: 28rpx;
				}
				.points {
					font-size: 32rpx;
					font-weight: 700;
				}
			}
		}
	}
</style>